<template>
  <div class="body">
    <div>
      <ul class="tops">
        <li
          style="background: #41a4ff; border-radius: 5px"
          @mouseover="checkout()"
          @click="goGuarantee()"
          v-if="casd"
        >
          <div class="top-left">
            <p>工程信息</p>
            <span>{{ homepagelist.shenhe_number }}</span>
          </div>
          <img src="../../assets/li.png" alt />
        </li>
        <li @click="goGuarantee()" @mouseleave="checkouts()" v-else>
          <div class="notices_footer_boxs">
            <div class="hear_name">
              <div class="shuxian" style="background-color: #41a4ff"></div>
              <div style="font-weight: 900" class="guarantees_name">
                工程信息
              </div>
            </div>
            <div
              style="
                display: flex;
                justify-content: space-around;
                flex: 1;
                width: 100%;
              "
              class="content"
            >
              <div
                style="
                  display: flex;
                  justify-content: space-around;
                  align-items: center;
                  width: 100%;
                  font-size: 16px;
                  font-weight: 400;
                "
              >
                <div>招标：{{ shenhe }}</div>
                <div>中标：{{ jujue }}</div>
              </div>
              <!-- <div
                style="
                  display: flex;
                  flex-direction: column;
                  justify-content: space-around;
                  width: 47%;
                  font-size: 16px;
                  font-weight: 400;
                "
              >
                <div>已出函：{{ chuhan }}</div>
                <div>已过期：{{ guoqi }}</div>
              </div> -->
            </div>
          </div>
        </li>
        <li
          style="background: #6384ff; border-radius: 5px"
          v-if="adas"
          @mouseover="scheckout()"
          @click="goProgress()"
        >
          <div class="top-left">
            <p>经办人</p>
            <span>{{ homepagelist.pay_number }}</span>
          </div>

          <img src="../../assets/li.png" alt />
        </li>
        <li @click="goProgress()" @mouseleave="scheckouts()" v-else>
          <div class="notices_footer_boxs">
            <div class="hear_name">
              <div class="shuxian" style="background-color: #41a4ff"></div>
              <div style="font-weight: 900" class="guarantees_name">经办人</div>
            </div>
            <div
              style="
                display: flex;
                justify-content: space-around;
                flex: 1;
                width: 100%;
              "
              class="content"
            >
              <div
                style="
                  display: flex;
                  justify-content: space-around;
                  align-items: center;
                  width: 100%;
                  font-size: 16px;
                  font-weight: 400;
                "
              >
                <div>总数：{{ jingbangr.total }}</div>
                <div>申请：{{ jingbangr.shenqing }}</div>
              </div>
              <!-- <div
                style="
                  display: flex;
                  flex-direction: column;
                  justify-content: space-around;
                  width: 47%;
                  font-size: 16px;
                  font-weight: 400;
                "
              >
                <div>已出函：{{ chuhan }}</div>
                <div>已过期：{{ guoqi }}</div>
              </div> -->
            </div>
          </div>
        </li>
        <li
          style="background: #cc9a99; border-radius: 5px"
          v-if="zladas"
          class="cinosli1"
          @mouseover="zlscheckout()"
          @click="zlgoProgress()"
        >
          <div class="top-left">
            <p>质量保函</p>
            <span>{{ homepagelist.fapiao_number }}</span>
          </div>

          <img src="../../assets/li.png" alt />
        </li>
        <li @click="tbgoProgress()" @mouseleave="zlscheckouts()" v-else>
          <div class="notices_footer_boxs">
            <div class="hear_name">
              <div class="shuxian" style="background-color: #41a4ff"></div>
              <div style="font-weight: 900" class="guarantees_name">
                质量保函
              </div>
            </div>
            <div
              style="
                display: flex;
                justify-content: space-around;
                flex: 1;
                width: 100%;
              "
              class="content"
            >
              <div
                style="
                  display: flex;
                  justify-content: space-around;
                  align-items: center;
                  width: 100%;
                  font-size: 16px;
                  font-weight: 400;
                "
              >
                <div>待审核：{{ zhiliang.daishen }}</div>
                <div>进行中：{{ zhiliang.zhixing }}</div>
                <div>已失效：{{ zhiliang.guoqi }}</div>
              </div>
              <!-- <div
                style="
                  display: flex;
                  flex-direction: column;
                  justify-content: space-around;
                  width: 47%;
                  font-size: 16px;
                  font-weight: 400;
                "
              >
                <div>已出函：{{ chuhan }}</div>
                <div>已过期：{{ guoqi }}</div>
              </div> -->
            </div>
          </div>
        </li>
        <li
          style="background: #99cc66; border-radius: 10px"
          class="cinosli2"
          v-if="yfkadas"
          @mouseover="yfkscheckout()"
          @click="yfkgoProgress()"
        >
          <div class="top-left">
            <p>预付款保函</p>
            <span>{{ homepagelist.fapiao_number }}</span>
          </div>

          <img src="../../assets/li.png" alt />
        </li>
        <li @click="yfkgoProgress()" @mouseleave="yfkscheckouts()" v-else>
          <div class="notices_footer_boxs">
            <div class="hear_name">
              <div class="shuxian" style="background-color: #41a4ff"></div>
              <div style="font-weight: 900" class="guarantees_name">
                预付款保函
              </div>
            </div>
            <div
              style="
                display: flex;
                justify-content: space-around;
                flex: 1;
                width: 100%;
              "
              class="content"
            >
              <div
                style="
                  display: flex;
                  justify-content: space-around;
                  align-items: center;
                  width: 100%;
                  font-size: 16px;
                  font-weight: 400;
                "
              >
                <div>待审核：{{ yuzifu.daishen }}</div>
                <div>进行中：{{ yuzifu.zhixing }}</div>
                <div>已失效：{{ yuzifu.guoqi }}</div>
              </div>
              <!-- <div
                style="
                  display: flex;
                  flex-direction: column;
                  justify-content: space-around;
                  width: 47%;
                  font-size: 16px;
                  font-weight: 400;
                "
              >
                <div>已出函：{{ chuhan }}</div>
                <div>已过期：{{ guoqi }}</div>
              </div> -->
            </div>
          </div>
        </li>
      </ul>
      <ul style="margin-top: 10px" class="tops">
        <li
          style="background: #cbccfe; border-radius: 5px"
          v-if="tbadas"
          class="cinosli1"
          @mouseover="tbscheckout()"
          @click="tbgoProgress()"
        >
          <div class="top-left">
            <p>投保保函</p>
            <span>{{ homepagelist.fapiao_number }}</span>
          </div>

          <img src="../../assets/li.png" alt />
        </li>
        <li @click="tbgoProgress()" @mouseleave="tbscheckouts()" v-else>
          <div class="notices_footer_boxs">
            <div class="hear_name">
              <div class="shuxian" style="background-color: #41a4ff"></div>
              <div style="font-weight: 900" class="guarantees_name">
                投保保函
              </div>
            </div>
            <div
              style="
                display: flex;
                justify-content: space-around;
                flex: 1;
                width: 100%;
              "
              class="content"
            >
              <div
                style="
                  display: flex;
                  justify-content: space-around;
                  align-items: center;
                  width: 100%;
                  font-size: 16px;
                  font-weight: 400;
                "
              >
                <div>待审核：{{ toubiao.daishen }}</div>
                <div>进行中：{{ toubiao.zhixing }}</div>
                <div>已失效：{{ toubiao.guoqi }}</div>
              </div>
              <!-- <div
                style="
                  display: flex;
                  flex-direction: column;
                  justify-content: space-around;
                  width: 47%;
                  font-size: 16px;
                  font-weight: 400;
                "
              >
                <div>已出函：{{ chuhan }}</div>
                <div>已过期：{{ guoqi }}</div>
              </div> -->
            </div>
          </div>
        </li>
        <li
          style="background: #cccc00; border-radius: 5px"
          class="cinosli2"
          v-if="qtadas"
          @mouseover="qtscheckout()"
          @click="qtgoProgress()"
        >
          <div class="top-left">
            <p>履约保函</p>
            <span>{{ homepagelist.fapiao_number }}</span>
          </div>

          <img src="../../assets/li.png" alt />
        </li>
        <li @click="qtgoProgress()" @mouseleave="qtscheckouts()" v-else>
          <div class="notices_footer_boxs">
            <div class="hear_name">
              <div class="shuxian" style="background-color: #41a4ff"></div>
              <div style="font-weight: 900" class="guarantees_name">
                履约保函
              </div>
            </div>
            <div
              style="
                display: flex;
                justify-content: space-around;
                flex: 1;
                width: 100%;
              "
              class="content"
            >
              <div
                style="
                  display: flex;
                  justify-content: space-around;
                  align-items: center;
                  width: 100%;
                  font-size: 16px;
                  font-weight: 400;
                "
              >
                <div>待审核：{{ lvyue.daishen }}</div>
                <div>进行中：{{ lvyue.zhixing }}</div>
                <div>已失效：{{ lvyue.guoqi }}</div>
              </div>
              <!-- <div
                style="
                  display: flex;
                  flex-direction: column;
                  justify-content: space-around;
                  width: 47%;
                  font-size: 16px;
                  font-weight: 400;
                "
              >
                <div>已出函：{{ chuhan }}</div>
                <div>已过期：{{ guoqi }}</div>
              </div> -->
            </div>
          </div>
        </li>
        <li
          style="background: #17e3d1; border-radius: 5px"
          v-if="yzadas"
          class="cinosli1"
          @mouseover="yzscheckout()"
          @click="yzgoProgress()"
        >
          <div class="top-left">
            <p>业主支付保函</p>
            <span>{{ homepagelist.fapiao_number }}</span>
          </div>

          <img src="../../assets/li.png" alt />
        </li>
        <li @click="tbgoProgress()" @mouseleave="yzscheckouts()" v-else>
          <div class="notices_footer_boxs">
            <div class="hear_name">
              <div class="shuxian" style="background-color: #41a4ff"></div>
              <div style="font-weight: 900" class="guarantees_name">
                业主支付保函
              </div>
            </div>
            <div
              style="
                display: flex;
                justify-content: space-around;
                flex: 1;
                width: 100%;
              "
              class="content"
            >
              <div
                style="
                  display: flex;
                  justify-content: space-around;
                  align-items: center;
                  width: 100%;
                  font-size: 16px;
                  font-weight: 400;
                "
              >
                <div>待审核：{{ yuzifu.daishen }}</div>
                <div>进行中：{{ yuzifu.zhixing }}</div>
                <div>已失效：{{ yuzifu.guoqi }}</div>
              </div>
              <!-- <div
                style="
                  display: flex;
                  flex-direction: column;
                  justify-content: space-around;
                  width: 47%;
                  font-size: 16px;
                  font-weight: 400;
                "
              >
                <div>已出函：{{ chuhan }}</div>
                <div>已过期：{{ guoqi }}</div>
              </div> -->
            </div>
          </div>
        </li>
        <li
          style="background: #ff9a65; border-radius: 5px"
          class="cinosli2"
          v-if="nmadas"
          @mouseover="nmscheckout()"
          @click="nmgoProgress()"
        >
          <div class="top-left">
            <p>农民工工资支付保函</p>
            <span>{{ homepagelist.fapiao_number }}</span>
          </div>

          <img src="../../assets/li.png" alt />
        </li>
        <li @click="qtgoProgress()" @mouseleave="nmscheckouts()" v-else>
          <div class="notices_footer_boxs">
            <div class="hear_name">
              <div class="shuxian" style="background-color: #41a4ff"></div>
              <div style="font-weight: 900" class="guarantees_name">
                农民工工资支付保函
              </div>
            </div>
            <div
              style="
                display: flex;
                justify-content: space-around;
                flex: 1;
                width: 100%;
              "
              class="content"
            >
              <div
                style="
                  display: flex;
                  justify-content: space-around;
                  align-items: center;
                  width: 100%;
                  font-size: 16px;
                  font-weight: 400;
                "
              >
                <div>待审核：{{ nmgong.daishen }}</div>
                <div>进行中：{{ nmgong.zhixing }}</div>
                <div>已失效：{{ nmgong.guoqi }}</div>
              </div>
              <!-- <div
                style="
                  display: flex;
                  flex-direction: column;
                  justify-content: space-around;
                  width: 47%;
                  font-size: 16px;
                  font-weight: 400;
                "
              >
                <div>已出函：{{ chuhan }}</div>
                <div>已过期：{{ guoqi }}</div>
              </div> -->
            </div>
          </div>
        </li>
      </ul>
      <ul style="margin-top: 10px" class="tops"></ul>
    </div>
    <div class="center">
      <div class="right">
        <div class="left-top">
          <h1 style="font-size: 20px; font-weight: bold" class="">消息通知</h1>
          <p @click="seemore">查看更多 ></p>
        </div>
        <div style="height: 90px" v-for="(item, index) in message" :key="index">
          <div class="notices_name">
            <div
              style=""
              class="dian"
              :class="item.status == 0 ? 'dian1' : 'dian2'"
            ></div>
            <div
              style="
                width: 66%;
                font-size: 16px;
                color: rgb(51, 51, 51);
                overflow: hidden;
                margin-left: 3%;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ item.title }}
            </div>
            <div style="padding-left: 5%" class="notice_time">
              {{ item.fsTime }}
              <!-- 2002-11-21 -->
            </div>
          </div>
          <div class="notices_details">接收人：{{ item.jsName }}</div>
          <div
            style="
              width: 100%;
              word-break: keep-all;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            "
            class="notices_details"
          >
            消息内容：{{ item.content }}
          </div>
        </div>
        <!-- <ul class="center-right">
          <li v-for="(item, index) in message" :key="index">
            <div class="center-left-top">
              <div class="center-left-tit">
                <div class="yuandian"></div>
                <span>类型</span>
                <span >系统消息 </span>
                <span v-show="item.type == 'sms '">短信消息 </span>
              </div>
              <div>2011-11-18</div>
              <div>{{ item.fs_time | dateFormat }}</div>
            </div>
            <div class="center-left-con">
              <div>
                <span>消息标题 :</span>
                <span> {{ item.title }}</span>
              </div>
              <div>
                <span>消息内容 :</span>
                <span>{{ item.js_name }}</span>
              </div>
            </div>
          </li>
        </ul> -->
      </div>
      <div class="left">
        <ul class="center-left">
          <li>
            <h1
              style="font-size: 20px;font-family: Microsoft YaHei-Bold, Microsoft YaHei;font-weight: bold;color: #333333;x"
            >
              工程动态
            </h1>
            <p></p>
          </li>
          <div
            class="center-left-con111"
            v-for="(item, index) in noticeList"
            :key="index"
          >
            <div class="notices_name">
              <div
                style=""
                class="dian"
                :class="item.status == 0 ? 'dian1' : 'dian2'"
              ></div>
              <div class="notices_name_text1111">
                {{ item.biddingProjectNumber }}
              </div>
              <div style="padding-left: 5%" class="notice_time">
                {{ item.createTime }}
              </div>
            </div>
            <div class="notices_details">
              工程编号：{{ item.biddingNumber }}
            </div>
            <div class="notices_details">
              工程名称：{{ item.biddingProjectName }}
            </div>
          </div>
        </ul>
      </div>
    </div>
    <div class="bottom">
      <div style="display: flex; align-items: center">
        <p
          style="
            font-size: 20px;
            font-family: Microsoft YaHei-Bold, Microsoft YaHei;
            font-weight: bold;
            color: #333333;
          "
        >
          新进保函数据
        </p>
        <p>(近七天)</p>
      </div>
      <div
        style="display: flex; justify-content: center"
        ref="main"
        id="main"
      ></div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { getinfo, list, recents } from "@/api/homepage";
// import { homepage, list,messageDel } from "@/api/homepage";
export default {
  data() {
    return {
      homepagelist: {
        user_id: "",
      },
      riqi: [],
      casd: true,
      adas: true,
      tbadas: true,
      qtadas: true,
      yzadas: true,
      nmadas: true,
      zladas: true,
      yfkadas: true,
      shuliang: [],
      shenhe: 10,
      jujue: 13,
      params: {
        // type: "",
        // keyWrod: "",
        pageNum: 1,
        pageSize: 10,
      },
      noticeList: [
        {
          type: "公开招标",
          proid: 58,
          bidding_code: "924835009",
          bidding_number: "豫财招标采购-2022-853",
        },
        {
          type: "竞争性谈判公告",
          proid: 57,
          bidding_code: "391802826",
          bidding_number: "豫财招标采购-2022-750",
        },
        {
          type: "竞争性磋商公告",
          proid: 56,
          bidding_code: "193437197",
          bidding_number: "豫财招标采购-2022-798",
        },
      ],
      yezhu: { gname: "业主支付保函", daishen: 157, zhixing: 5, guoqi: 19 },
      lvyue: { gname: "履约保函", daishen: 157, zhixing: 4, guoqi: 53 },
      nmgong: {
        gname: "农民工工资支付保函",
        daishen: 157,
        zhixing: 0,
        guoqi: 9,
      },
      toubiao: { gname: "投标保函", daishen: 157, zhixing: 0, guoqi: 28 },
      zhiliang: { gname: "质量保函", daishen: 157, zhixing: 1, guoqi: 7 },
      yuzifu: { gname: "预付款保函", daishen: 157, zhixing: 0, guoqi: 2 },
      message: [],
      jingbangr: { total: 4, shenqing: 0 },
    };
  },

  beforeCreate() {
    recents().then((res) => {
      console.log(res);
    });
    // console.log(user_id);
    var bbc = {
      userId: localStorage.getItem("userId"),
    };
    getinfo(bbc).then((response) => {
      // console.log(response.data.data.baohan);
      this.homepagelist = response.data.data;
      this.noticeList = response.data.data.projectList;
      // this.message = response.data.data.message;
      this.jingbangr = response.data.data.jingbanren;
      this.yezhu = response.data.data.baohan[0];
      this.lvyue = response.data.data.baohan[1];
      this.nmgong = response.data.data.baohan[2];
      this.toubiao = response.data.data.baohan[3];
      this.zhiliang = response.data.data.baohan[4];
      this.yuzifu = response.data.data.baohan[5];
      var bbc = response.data.data.projectNumber;
      console.log(bbc, "ajsgajgj");
      if (response.data.data.projectNumber.length > 0) {
        for (let index = 0; index < response.data.data.projectNumber.length; index++) {
          // const element = array[index];
          console.log(bbc[index]);
          this.riqi.push(bbc[index].applicationDate);
          this.shuliang.push(bbc[index].applicationCount);
          // console.log(this.riqi,this.shuliang)
        }
      }

      this.drawChart();
      setTimeout(() => {
        this.drawChart();
        const resizeOb = new ResizeObserver((entries) => {
          for (const entry of entries) {
            this.$echarts.getInstanceByDom(entry.target).resize();
          }
        });
        resizeOb.observe(this.$refs.main);
      }, 100);
      // bbc.forEach(element => {
      //   this.riqi.push(element.day)
      //   this.shuliang.push(element.number)
      //   console.log(element)
      // });
      // this.riqi=response.data
    });
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      list({ ...this.params }).then((res) => {
        if (res.data.code == 200) {
          if (res.data.rows.length > 2) {
            this.message = [res.data.rows[0], res.data.rows[1]];
          } else {
            this.message = res.data.rows;
          }
        }
      });
    },
    //页面
    checkout() {
      this.casd = false;
    },
    scheckout() {
      this.adas = false;
    },
    tbscheckout() {
      this.tbadas = false;
    },
    // 通知查看更多
    seemore() {
      console.log("查看");
      this.$router.push("/msg/index");
    },
    // 待办事项查看更多
    seemoreLeft() {
      this.$router.push("/information/Purchase/All");
    },
    lyscheckout() {
      this.lyadas = false;
    },
    yzscheckout() {
      this.yzadas = false;
    },
    nmscheckout() {
      this.nmadas = false;
    },
    zlscheckout() {
      this.zladas = false;
    },
    yfkscheckout() {
      this.yfkadas = false;
    },
    qtscheckout() {
      this.qtadas = false;
    },
    checkouts() {
      this.casd = true;
    },
    scheckouts() {
      this.adas = true;
    },
    tbscheckouts() {
      this.tbadas = true;
    },
    ylscheckouts() {
      this.lyadas = true;
    },
    yzscheckouts() {
      this.yzadas = true;
    },
    nmscheckouts() {
      this.nmadas = true;
    },
    zlscheckouts() {
      this.zladas = true;
    },
    yfkscheckouts() {
      this.yfkadas = true;
    },
    qtscheckouts() {
      this.qtadas = true;
    },
    homepages() {},
    drawChart() {
      let myEchart = this.$echarts.init(document.getElementById("main"));
      let option = {
        grid: {
          x: 40,
          y: 45,
          x2: 25,
          y2: 25,
          borderWidth: 1,
        },
        tooltip: {
          // 鼠标悬浮提示框显示 X和Y 轴数据
          trigger: "axis",
          backgroundColor: "rgba(32, 33, 36,.7)",
          borderColor: "rgba(32, 33, 36,0.20)",
          borderWidth: 1,
          textStyle: {
            // 文字提示样式
            color: "#fff",
            fontSize: "12",
          },
        },

        // legend: {
        //   data: ["a", "b"],
        // },
        xAxis: {
          data: this.riqi,
        },
        yAxis: {},
        series: [
          {
            data: this.shuliang,
            type: "line",
            smooth: true,
            symbol: "none",
            areaStyle: {
              color: "#344CE9",
              opacity: 0.5,
            },
          },
        ],
      };
      myEchart.setOption(option);
    },
  },
  mounted() {},
};
</script>

<style scoped lang="scss">
ul li {
  list-style: none;
}
.body {
  background: #f5f6fa;
  /* position: absolute; */
  /* min-width: calc(100vw - 500px); */
  /* height: 91vh; */
}
.tops {
  width: 100%;
  /* height: 15vh; */
  display: flex;
  justify-content: space-between;
  /* flex-wrap: wrap;
  justify-content: space-between; */
  /* margin-top: -10px; */
}
.tops li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  overflow: hidden;
  color: #fff;
  width: 24.4%;
  height: 9rem;
  /* background: url(../../assets/li1.png); */
  background-repeat: no-repeat;
  background-size: 100% 99%;
}

.tops li span {
  font-size: 40px;
  font-weight: 700;
}
.tops-left {
  font-size: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 30px;
  height: 100%;
}
.tops li img {
  margin-top: 30px;
  /* margin-left: 290px; */
}

.top {
  width: 100%;
  /* height: 15vh; */
  display: flex;
  justify-content: space-between;
  /* flex-wrap: wrap;
  justify-content: space-between; */
  /* margin-top: -10px; */
}
.biaoduan_card {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.top li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  overflow: hidden;
  color: #fff;
}

.top li span {
  font-size: 40px;
  font-weight: 700;
}
.top-left {
  font-size: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 30px;
  height: 100%;
}
.top li img {
  margin-top: 30px;
  /* margin-left: 290px; */
}

.top li:nth-of-type(1) {
  /* width: 32%; */
  width: 49%;
  height: 9rem;
  /* background: url(../../assets/li1.png); */
  background-repeat: no-repeat;
  background-size: 100% 99%;
}

.top li:nth-of-type(2) {
  /* width: 32%; */
  width: 49%;
  height: 9rem;
  /* background-image: url(../../assets/li2.png); */
  background-repeat: no-repeat;
  background-size: 100% 99%;
  /* margin-left: 2%; */
}
.cinosli1 {
  /* background-image: url(../../assets/li3.png) !important; */
  background-repeat: no-repeat;
}
.cinosli2 {
  /* background-image: url(../../assets/li4.png) !important; */
  background-repeat: no-repeat;
}
.top li:nth-of-type(3) {
  /* width: 32%; */
  width: 48%;
  height: 9rem;
  /* background-image: url(../../assets/li3.png); */
  background-repeat: no-repeat;
  background-size: 100% 99%;
  /* margin-left: 2%; */
}

.top li:nth-of-type(4) {
  /* width: 23%; */
  width: 48%;
  height: 9rem;
  /* background-image: url(../../assets/li4.png); */
  background-repeat: no-repeat;
  background-size: 100% 99%;
  /* margin-left: 2%; */
}

.center {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  margin-top: 25px;

  /* height: 37vh; */
}

.center .left {
  width: 47%;
  background: #ffffff;
  border-radius: 10px 10px 10px 10px;
  padding: 20px;
  padding-top: 10px;
  /* padding-bottom: 10px; */
}

.center-left {
  color: #666666;
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: space-between;
}

.center-left title {
  color: #333;
  font-size: 16px;
}

.center-left .btn1 {
  color: #fff;
  width: 97px;
  height: 28px;
  border: none;
  background-color: #1795ff;
  margin-left: 10px;
}

.center-left .btn {
  color: #fff;
  width: 120px;
  height: 40px;
  border: none;
  background-color: #1795ff;
}

.center-left li:nth-of-type(1) {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  /* height: 50px; */
  /* margin-top: -10px; */
}

.center-left li:nth-of-type(2) {
  width: 100%;
  height: 150px;
  margin-top: -20px;
}

.center .right {
  display: flex;
  flex-direction: column;
  width: 50%;
  background: #ffffff;
  border-radius: 10px 10px 10px 10px;
  padding: 20px;
  padding-bottom: 0;
  /* height: 37vh; */
}

.center .right .notice {
  /* margin: 20px; */
  margin-bottom: 0.625rem;
}

.center .right tr {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  /* width: 41vw;
  height: 5vh;
  */
  /* margin-left: 1.875rem; */
  margin-bottom: 0.625rem;
  background-color: #f8f9fb;
  align-items: center;
}

.center .right tr p:nth-of-type(2) {
  color: #282d30;
}

.center .right tr p:nth-of-type(2) {
  font-size: 12px;
  color: #74798c;
}

.center .right tr p:nth-of-type(3) {
  font-size: 10px;
  color: #9ba2ab;
}

.center .right tr img {
  width: 25px;
  height: 25px;
  margin: 10px;
}

.bottom {
  width: 100%;
  /* height: 39vh; */
  background: #ffffff;
  border-radius: 10px 10px 10px 10px;
  padding: 25px;
  /* padding-bottom: 0; */

  margin-top: 1.25rem;
}

// .bottom p {
//   /* margin-top: 110px;
//   margin-left: 40px; */
// }

#main {
  /* margin-top: -40px; */
  width: 100%;
  height: 300px;
  /* height: 39vh; */
}
</style>
<style scoped lang="scss">
.btns {
  padding-left: 40%;
  /* position: relative;
  left: 57%; */
}
.hear_name {
  display: flex;
  align-items: center;
  width: 100%;
  height: 50px;
}
.shuxian {
  width: 7px;
  height: 28px;
  background-color: #41a4ff;
  margin-left: 4px;
}
.guarantees_name {
  font-size: 20px;
  color: #333;
  margin-left: 10px;
  font-weight: Bold;
}
.speed_font {
  color: #ffffff;
  font-size: 18px;
  padding-top: 10px;
  /* position: relative;
    top: 49px;
    left: 103px; */
}

.speed_font1 {
  color: #ffffff;
  font-size: 18px;
  padding-top: 10px;
  /* position: relative;
    top: 49px;
    left: 87px; */
}

/* .speed_img {
  position: relative;
    top: 36px;
    left: 117px;
} */

.speed_img img {
  width: 50px;
  height: 44px;
}

.notices_footer_box {
  width: 49%;
  height: 144px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #1795ff;
}
.notices_footer_boxs {
  width: 100%;
  height: 144px;
  display: flex;
  color: #000;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background-color: #f5f6fa;
}
.notices_footer {
  display: flex;
  justify-content: space-between;
}

.notices_details {
  width: 100%;

  overflow: hidden;
  /* white-space: nowrap; */
  text-overflow: ellipsis;
  padding-left: 5%;
  color: #666666;
}

.notice_time {
  /* position: relative;
    left: 168px; */

  color: #666;
}

.notices_name {
  height: 40px;
  display: flex;
  align-items: center;
  /* justify-content: space-evenly; */
}

.dian {
  width: 7px;
  height: 7px;
  margin-left: 1%;
  border-radius: 180px;
}

.dian1 {
  background-color: #ce0000;
}

.dian2 {
  background-color: #1795ff;
}

.noticeList {
  width: 100%;
  height: 272px;
  background-color: #ffffff;
}

.notices {
  width: 50%;
  height: 475px;
  margin-right: 10px;
}

.notice_hear {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 60px;
  background-color: #1795ff;
  color: #ffffff;
  font-size: 24px;
}
.left-top {
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  h1 {
    font-weight: bold !important;
  }
}
.center-right {
  color: #666666;
  font-size: 14px;
  display: flex;
  flex-direction: column;

  li {
    margin-bottom: 10px;
  }

  li .center-left-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 20px;
    box-sizing: border-box;
  }

  .center-left-tit {
    display: flex;
    align-items: center;

    span {
      color: #333;
    }
  }

  .center-left-con {
    margin-top: 10px;
    flex: 1;
    width: 100%;

    div {
      padding-left: 15px;
      box-sizing: border-box;
      /* // margin-bottom: 10px; */
      height: 26px;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      line-clamp: 1;
      -webkit-box-orient: vertical;
    }
  }
}
.center-left-con111 {
  height: 90px;
}
.notices_name_text1111 {
  width: 66%;
  font-size: 16px;
  color: rgb(51, 51, 51);
  overflow: hidden;
  margin-left: 3%;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
